<template>
    <div>
        <el-dialog
                title="采购订单"
                :visible.sync="visible"
                width="40%"
        >
            <el-table
                    :data="form"
                    style="width: 100%">

                <el-table-column
                        prop="pname"
                        label="商品名"
                >

                </el-table-column>
                <el-table-column
                        prop="price"
                        label="商品单价"
                >
                </el-table-column>
                <el-table-column
                        prop="Bp"
                        label="商品进价"
                >
                    <template  slot-scope="scope">
                        <el-input v-model="scope.row.BP" type="number" min="0" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="uom"
                        label="计量单位"
                >
                </el-table-column>
                <el-table-column
                        prop="productstype.typename"
                        label="商品类别"
                >
                </el-table-column>
                <el-table-column
                        prop="sku"
                        label="商品库存"
                >
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="数量"
                >
                    <template  slot-scope="scope">
                        <el-input v-model="scope.row.num" type="number" min="0" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="总计"
                >
                    <template slot-scope="scope">
                        {{scope.row.num * scope.row.BP}}
                    </template>

                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </span>

        </el-dialog>
        <el-button  type="primary" plain @click="ProcurementOrder()" size="small" >查看采购订单</el-button>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="pid"
                    label="商品编号"
            >

            </el-table-column>
            <el-table-column
                    prop="mainimage"
                    label="商品图片"
            >
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="'http://localhost:9999/img/head/'+scope.row.mainimage"
                            fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="商品名"
            >

            </el-table-column>
            <el-table-column
                    prop="price"
                    label="商品单价"
            >
            </el-table-column>
            <el-table-column
                    prop="uom"
                    label="计量单位"
            >
            </el-table-column>
            <el-table-column
                    prop="productstype.typename"
                    label="商品类别"
            >
            </el-table-column>
            <el-table-column
                    prop="sku"
                    label="商品库存"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button  type="primary" plain @click="addProcurement(scope.row)" size="small" >添加采购</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @current-change="currentChange"
                layout="prev, pager, next"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Procurement",
        data(){
          return{
              visible:false,
              pageSize:5,
              currentPage:1,
              total:1,
              tableData:[],
              Pname:"",
              form:[]
          }
        },
        created() {
            this.$http.post("products/selectAll",{pname:this.Pname,currentPage:this.currentPage,pageSize:this.pageSize}).then(res=>{
                this.tableData=res.data.list;
            })
        },
        methods: {
            addProcurement(row) {
                if (this.form.some(item => item.pid === row.pid)) {
                    this.$message({
                        message: '该商品已加入采购订单',
                        type: 'warning'
                    });
                } else {
                    this.$set(row, "BP", 0)
                    this.$set(row, "num", 0)
                    this.form.push(row);
                }

                console.info(this.form)
            },
            ProcurementOrder() {
                this.visible = true;
            },
            save() {
                console.info(this.form)
            },
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.loadData()
            }
        }
    }
</script>

<style scoped>

</style>